<template>
  <div>
    <div class="top">
      <van-button
        icon="iconfont icon-sousuo"
        icon-prefix="iconfont"
        class="searchbtn"
        v-if="isshow"
        round
        size="small"
        @click="btnisshow"
        >搜索</van-button
      >
      <van-search
        show-action
        v-model="data"
        shape="round"
        background="rgb(39, 147, 255)"
        placeholder="请输入搜索关键词"
        v-else
        :action-text="type"
        @focus="clicksearch"
        @blur="blurinput"
        @cancel="onSearch"
      >
      </van-search>
      <i class="righticon iconfont icon-gengduo"></i>
    </div>
    <van-tabs class="tabs" v-model="channelid" @click="changetabs">
      <van-tab
        v-for="item in channel"
        :title="item.name"
        :key="item.id"
        :name="item.id"
      />
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-empty description="网络请求失败" image="network" v-if="!newdate" />
      <div class="main" v-for="item in news" :key="item.art_id" v-else>
        <van-cell v-if="item.cover.type === 3">
          <h3>{{ item.title }}</h3>
          <img
            class="images"
            :src="obj"
            alt=""
            v-for="(obj, index) in item.cover.images"
            :key="index"
          />
          <span class="first">{{ !item.is_top ? '置顶' : '' }}</span>
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ timestamp2fromNow(item.pubdate) }}</span>
        </van-cell>
        <van-cell class="oneimage" v-if="item.cover.type === 1">
          <div>
            <h3>{{ item.title }}</h3>
            <span class="first">{{ !item.is_top ? '置顶' : '' }}</span
            ><span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ timestamp2fromNow(item.pubdate) }}</span>
          </div>
          <img class="image" :src="item.cover.images[0]" alt="" />
        </van-cell>
      </div>
    </van-list>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      data: '',
      value: '',
      isshow: true,
      type: '取消',
      channelid: '',
      finished: false,
      loading: false,
      flag: true
    }
  },
  async mounted() {
    await this.getinfo()
    await this.getnews({
      channel_id: this.channelid,
      timestamp: Date.now()
    })
    this.flag = false
  },
  methods: {
    ...mapActions('home', ['getinfo', 'getnews', 'addnews']),
    btnisshow() {
      this.isshow = false
    },
    onSearch() {
      if (this.type === '取消') {
        this.isshow = true
      } else {
        console.log('value =>', this.value)
      }
    },
    clicksearch() {
      this.type = '搜索'
    },
    blurinput() {
      this.value = this.data
      setTimeout(() => {
        this.type = '取消'
      }, 0)
    },
    changetabs() {
      this.getnews({
        channel_id: this.channelid,
        timestamp: new Date()
      })
    },
    timestamp2fromNow(date) {
      moment.locale('zh-cn')
      return moment(date).fromNow()
    },
    async onLoad() {
      if (this.flag) {
        return (this.loading = false)
      }
      await this.addnews({
        channel_id: this.channelid,
        timestamp: this.newdate
      })
      this.loading = false
      if (!this.newdate) {
        this.finished = true
      }
    }
  },
  computed: {
    ...mapState('home', ['channel', 'news', 'newdate'])
  }
}
</script>

<style scoped lang='less'>
.top {
  position: relative;
  width: 100%;
  background-color: rgb(39, 147, 255);
  text-align: center;
  .van-search {
    .van-search__action {
      color: #fff;
    }
    .van-search__action:active {
      background-color: rgb(39, 147, 255);
    }
  }
  .searchbtn {
    margin: 22px 0;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 30px;
    i {
      font-size: 45px;
    }
    span {
      margin-top: 10px;
    }
  }
  .righticon {
    position: absolute;
    z-index: 999;
    right: 0;
    bottom: -83%;
    font-size: 50px;
    background-color: #fff;
    padding: 20px 20px 20px 10px;
  }
}
::v-deep .tabs .van-tabs__wrap .van-tabs__nav {
  padding-right: 80px;
  .van-tab {
    border-right: 1px solid #eee;
  }
}
.main .images {
  width: 33%;
  height: 180px;
  background-size: contain;
}
.main .image {
  display: block;
  width: 33%;
  height: 180px;
}
.main span {
  margin-right: 10px;
  color: #666;
}
.main .first {
  color: red;
}
::v-deep .main .oneimage .van-cell__value {
  display: flex;
  div {
    flex: 2;
  }
  img {
    flex: 1;
  }
}
</style>
